<template>
  <div class="home">
    <div class="box">
      <!-- 五张牌的渲染 -->
      <div
        @click="change_card(index)"
        v-for="(item, index) in store.state.deck"
        :key="index"
      >
        {{ item }}
      </div>
    </div>
    <!-- 重置按钮 -->
    <el-button type="primary" @click="sort_deck">Reset</el-button>
    <!-- 自组件 -->
    <Card_part :card_flag="card_flag" @click_close="clickEven"></Card_part>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { useStore } from "vuex";
import { key } from "../store";
import Card_part from "../components/Card_part.vue";
const store = useStore(key);
// 控制组件是否显示
let card_flag = ref(false);
// 打开对话框
const change_card = (i: number) => {
  store.commit("CHANGE_INDEX", i);
  card_flag.value = true;
};
// 关闭对话框
const clickEven = (val: boolean) => {
  card_flag.value = val;
};
// 重新排序
const sort_deck = () => {
  store.commit("SORT_DECK");
};
</script>
<style scoped>
.box {
  width: 1200px;
  height: 400px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
}
.box > div {
  width: 200px;
  height: 400px;
  border: 1px solid #ccc;
  border-radius: 20px;
  line-height: 400px;
  text-align: center;
  font-size: 35px;
}
</style>
